<template>
  <div class="app-container">
      <div class="searchDiv">
        <el-form ref="queryForm" :inline="true" :model="queryParams" class="demo-form-inline" >
          <el-form-item label="登陆账户">
            <el-input type="text" placeholder="请输入登陆账户" clearable v-model="queryParams.account" class="width1"></el-input>
          </el-form-item>
          <el-form-item label="登陆状态">
            <el-select v-model="queryParams.status" clearable placeholde="请选择登陆状态" class="width1">
              <el-option v-for="item in statusOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="登陆时间">
            <el-date-picker v-model="queryParams.createTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" class="width1"></el-date-picker>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" @click="delLog()" v-has-permission="['monitor:loginlog:delete']">删除</el-button>
            <el-button type="danger" icon="el-icon-delete-solid" @click="emptyLog()" v-has-permission="['monitor:loginlog:empty']">清空</el-button>
          </el-col>
        </el-row>
      </div>

      <el-table :data="logList" v-loading="loading" stripe>
        <el-table-column label="序号" type="index" width="50" align="center">
          <template slot-scope="scope">
            {{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="登录IP"></el-table-column>
        <el-table-column prop="account" label="登录账户"></el-table-column>
        <el-table-column prop="descript" label="登录描述" width="210"></el-table-column>
        <el-table-column prop="status" label="登陆状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | tagClass">
              {{scope.row.status | statusText(statusTextDict)}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="登录时间"></el-table-column>
        <el-table-column prop="location" label="登录位置"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="delOneLog(scope.row.logId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getLogList"
      />

  </div>
</template>


<script>
  import { list } from '@/api/monitor/loginlog'
  export default {
    name: "loginlog_index",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 表格数据
        logList: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          account: undefined,
          createTime: undefined,
          status: undefined
        },
        statusOptions: [
          { label: '成功', value: 0 },
          { label: '失败', value: 1 },
        ],
        statusTextDict: {
          '0': '成功',
          '1': '失败'
        }
      }
    },
    created() {
      this.getLogList();
    },
    filters: {
      statusText(val, statusTextDict) {
        return statusTextDict[val];
      },
      tagClass(val) {
        if (val === undefined) {
          return
        }
        if (val === '0') {
          return 'success'
        } else if (val === '1') {
          return 'danger'
        }
      }
    },
    methods: {
      search() {
        this.queryParams.pageNum = 1;
        this.getLogList();
      },
      delLog() {

      },
      delOneLog(logId) {

      },
      emptyLog() {

      },
      // 查询登录日志
      getLogList() {
        this.loading = true;
        list(this.queryParams).then(res => {
          this.logList = res.data.rows;
          this.total = res.data.total;
          this.loading = false;
        }).catch(error => {
          this.$message.error(error.message);
          this.loading = false;
        });
      },

    }
  }
</script>

<style lang="scss" scoped>
  .searchDiv {
    margin-top: 5px;
    margin-bottom: 15px;
  }
  .width1 {
    width: 220px;
    margin-right: 10px;
  }
</style>

